<template>
  <!-- 头部 -->
  <div class="together">
    <van-row>
      <van-col span="8">
        <van-icon class="arrowLeft" name="arrow-left" @click="arrowclick" />
      </van-col>
      <van-col span="8">
        <van-field class="textClass" v-model="text" label="加入我们" />
      </van-col>
      <van-col span="8">
        <van-icon class="shareO" name="share-o" @click="showShare = true" />
        <van-share-sheet
          v-model="showShare"
          title="立即分享给好友"
          :options="options"
          @select="onSelect"
        />
      </van-col>
    </van-row>
    <van-divider />

    <!-- 内容 -->
    <div class="ordersO">
      <van-grid>
        <van-grid-item icon="orders-o" />
        配送加盟合作
        <br />
        更多业务量，更大知名度
        <div class="immeClass">
          立即加盟
        </div>
      </van-grid>
      <van-grid>
        <van-grid-item icon="logistics" />
        城市代理商请求
        <br />
        代理早日粥品，合作共赢
        <div class="immeClass">
          立即申请
        </div>
      </van-grid>
      <van-grid>
        <van-grid-item icon="smile-o" />
        到店美食商户入驻
        <br />
        线上开店带客流，做营销
        <div class="immeClass">
          立即申请
        </div>
      </van-grid>
      <van-grid>
        <van-grid-item icon="shop-collect-o" />
        商务合作
        <br />
        来共享万亿线下收单红利
        <div class="immeClass">
          立即申请
        </div>
      </van-grid>
      <van-grid>
        <van-grid-item icon="goods-collect-o" />
        配送加盟合作
        <br />
        有商务合作、产品对接等
        <div class="immeClass">
          合作申请
        </div>
      </van-grid>
    </div>
    <van-divider />
    <van-divider />
    <router-link to="/Questions">
      <div>
        <van-grid style="margin:240px 0 0 0;">
          <van-grid-item icon="question-o" />
          <b style="margin:17px 0 0 0;">常见问题</b>
          <div style="margin:17px 0 0 215px;font-size:25px;">
            <van-icon name="arrow" />
          </div>
        </van-grid>
      </div>
    </router-link>
  </div>
</template>
<script>
export default {
  data() {
    return {
      text: "",
      showShare: false,

      options: [
        { name: "微信", icon: "wechat" },
        { name: "微博", icon: "weibo" },
        { name: "复制链接", icon: "link" },
        { name: "分享海报", icon: "poster" },
        { name: "二维码", icon: "qrcode" },
      ],
    };
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },

    arrowclick() {
      this.$router.push("/homes");
    },
  },
};
</script>
<style scoped>
.arrowLeft {
  margin: 7px 0 0 3px;
  font-size: 30px;
}
.textClass {
  font-size: 20px;
}
.shareO {
  padding: 7px 0 0 100px;
  font-size: 30px;
}
.ordersO {
  height: 35px;
}
.immeClass {
  border: 1px solid yellow;
  border-radius: 5px;
  height: 22px;
  background-color: yellow;
  margin: 20px 0 0 60px;
}
</style>
